<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 目标对象
      const user = {
        name: "佐肋",
        age: 20,
        wife: {
          name: "小樱",
          age: 19,
        },
      };
      // 把目录对象变成代理对象
      const proxyUser = new Proxy(user, {
        get(target, prop) {
          console.log("get");
          return Reflect.get(target, prop);
        },
        //修改|添加属性值
        set(target, prop, val) {
          console.log("set");
          return Reflect.set(target, prop, val);
        },
        deleteProperty(target, prop) {
          console.log("delete");
          return Reflect.deleteProperty(target, prop);
        },
      });

      console.log(proxyUser.name);
      proxyUser.name = "鸣人";
      console.log(user);
      // 添加一个属性
      proxyUser.gender = "男";
      console.log(user);

      delete proxyUser.name;
      console.log(user);

      proxyUser.wife.name="雏田"
      console.log(user);
    </script>
  </body>
</html>
